<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" value="IE=9">
    <link rel="stylesheet" href="default.css" />
    <link rel="stylesheet" href="../dist/css/style.css" />
    <script src="../dist/CommentCoreLibrary.js"></script>
    <title>Testrun Player</title>
</head>
<body>
    <div class="m20 abp" id="player">
        <div id="commentCanvas" class="container"></div>
        <video id="abpVideo" height="100%" width="100%" poster="http://content.bitsontherun.com/thumbs/bkaovAYt-720.jpg" controls="none">
            <source src="http://content.bitsontherun.com/videos/bkaovAYt-52qL9xLP.mp4" type="video/mp4">
            <source src="http://content.bitsontherun.com/videos/bkaovAYt-27m5HpIu.webm" type="video/webm">
            <p class="warning">Your browser does not support HTML5 video.</p>
        </video>
    </div>
    <script type="text/javascript">
    var $ = function(e) {return document.getElementById(e);};
    var cm = null;
    var timer = 0;
    function togglePlayback () {
        var videoPlayer = $('abpVideo');
        if (videoPlayer == null) {
            return; //Called when not fully loaded
        }
        if (videoPlayer.paused){
            if(cm != null){
                timer = setInterval(function () {
                    cm.time(Math.round(videoPlayer.currentTime * 1000));
                }, 10);
            }
            cm.start();
            videoPlayer.play(); 
        }else{
            if(cm != null){
                cm.stop();
                clearTimeout(timer);
            }
            videoPlayer.pause(); 
        }
    }
    window.addEventListener("load",function () {
        //Hook basics
        cm = new CommentManager($('commentCanvas'));
        cm.init();
        cm.start();
        try{
            clearTimeout(timer);
        }catch(e){
            // Foo
        }
        $('player').addEventListener("click",function(){
            togglePlayback();
        });
        var cp = (new CommentProvider()).addStaticSource(
            CommentProvider.XMLProvider("GET", "../test/comment.xml"), 
            CommentProvider.SOURCE_XML).addParser(
            new BilibiliFormat.XMLParser(), 
            CommentProvider.SOURCE_XML).addTarget(cm);
        cp.start().catch(function (e) {
            alert(e);
        });
        cm.clear();
    });
    </script>
</body>
</html>
